import './Order.scss'

import React from 'react'
import {connect} from 'react-redux'
import {getOrderDate} from '../actions/orderAction.js'
import ListItem from'./ListItem/ListItem.jsx'
import ScrollView from '../../../component/ScrollView/ScrollView.jsx'
import Loading from "../../../component/Loading/Loading.jsx";
//订单order代码
class Order extends React.Component {
  constructor(prors) {
    super(prors)
    this.page=0
    this.state={
      isend: false
    }
    this.fetchData(this.page)
  }
  loadPage(){
    this.page++;
    if (this.page > 3){
      this.setState({
        isend:true
      })
    } else {
      this.fetchData(this.page)
    }
  }
  
  fetchData(page){
    this.props.dispatch(getOrderDate(page))
  }
  renderList(){
    let lists = this.props.lists
    return lists.map((item,index)=>{
      return <ListItem key={index} itemData={item}></ListItem>
    })
  }
  render() {
    return (
      <div className='order'>
        <div className='header'>订单</div>
          <ScrollView className='order-list' loadCallback={this.loadPage.bind(this)} isend={this.state.isend} >
            {this.renderList()}
            <Loading isend={this.state.isend}/>
        </ScrollView>
      </div>
    )
  }
}
export default connect(
  state =>({
    lists: state.orderReducer.lists
  })
)(Order)